body{
  background-color: #ffffff;
}
.clock-cmp-content{
  overflow: auto;
}
.user-info-zone{
  border-top: 1px solid;
  height: 40px;
  padding: 0 14px;
  .user-header{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: no-repeat center;
    background-size: cover;
    background-color:#E4E4E4 ;
  }
  p{
    margin-left: 10px;
  }
  .user-name{
  color: #333333;
  }
  .job-type{
    color: #999999;
  }
}
.month-calendar{
  min-height: 143px;
  .cmp-dtcHeader{
    .title{
      left:14px;
      text-align: left;
    }
    .right{
      margin-right: 10px;
      margin-top: 8px;
      line-height: 24px;
      padding: 0 6px;
      border: 1px solid #3AADFB;
      border-radius: 4px;
    }
  }
  .cmp-dtcContent .order .dot{
     background-color: #FF5E5E;
  }
}
.list-group-title{
  padding: 11px 14px 10px;
  color: #999999;
  background-color: #fff;

}
.clock-cmp-content{

  .result-list-group{
    background-color: #fff;
    padding: 10px 20px 20px 16px;
  }
  .list-group{
    border-left: 1px solid #F3F3F3;
    .list-item{
      padding-left: 18px;
      margin-bottom: 20px;
      position: relative;
      &:before{
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #3AADFB;
        left: -6px;
        z-index: 2;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      &:last-of-type{
        margin-bottom: 0;
      }
      span{
        margin-left: 1px;
      }
    }
    .time-status{
      height: 30px;
      color: #111111;
      font-size: 22px;
      line-height: 30px;
    }
    .item-content{
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 10px 0px rgba(0,0,0,0.06);
      border-radius:4px;
      padding: 10px 14px;
    }
    .address{
      margin-top: 6px;
      .address-icon{
color: #A2ACC7;
      }
      .address-wifi{
   color: #A2ACC7;
      }
      .address-text{
         color: #999999;
      }
    }
  }
}